<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | Dashboard</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="${pageContext.request.contextPath}/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="${pageContext.request.contextPath}/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.${pageContext.request.contextPath}/resources/js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>
			Buttons <small>Control panel</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li><a href="#">UI</a></li>
			<li class="active">Buttons</li>
		</ol>
	</section>

	<!-- Main content -->
	<section class="content">

		<div class="row">
			<div class="col-md-12">
				<div class="box box-primary">
					<div class="box-header">
						<i class="fa fa-edit"></i>
						<h3 class="box-title">Buttons</h3>
					</div>
					<div class="box-body pad table-responsive">
						<p>
							Various types of buttons. Using the base class
							<code>.btn</code>
						</p>
						<table class="table table-bordered text-center">
							<tr>
								<th>Normal</th>
								<th>Large <code>.btn-lg</code></th>
								<th>Mini <code>.btn-sm</code></th>
								<th>Flat <code>.btn-flat</code></th>
								<th>Disabled <code>.disabled</code></th>
							</tr>
							<tr>
								<td><button class="btn btn-default">Default</button></td>
								<td><button class="btn btn-default btn-lg">Default</button></td>
								<td><button class="btn btn-default btn-sm">Default</button></td>
								<td><button class="btn btn-default btn-flat">Default</button></td>
								<td><button class="btn btn-default disabled">Default</button></td>
							</tr>
							<tr>
								<td><button class="btn btn-primary">Primary</button></td>
								<td><button class="btn btn-primary btn-lg">Primary</button></td>
								<td><button class="btn btn-primary btn-sm">Primary</button></td>
								<td><button class="btn btn-primary btn-flat">Primary</button></td>
								<td><button class="btn btn-primary disabled">Primary</button></td>
							</tr>
							<tr>
								<td><button class="btn btn-success">Success</button></td>
								<td><button class="btn btn-success btn-lg">Success</button></td>
								<td><button class="btn btn-success btn-sm">Success</button></td>
								<td><button class="btn btn-success btn-flat">Success</button></td>
								<td><button class="btn btn-success disabled">Success</button></td>
							</tr>
							<tr>
								<td><button class="btn btn-info">Info</button></td>
								<td><button class="btn btn-info btn-lg">Info</button></td>
								<td><button class="btn btn-info btn-sm">Info</button></td>
								<td><button class="btn btn-info btn-flat">Info</button></td>
								<td><button class="btn btn-info disabled">Info</button></td>
							</tr>
							<tr>
								<td><button class="btn btn-danger">Danger</button></td>
								<td><button class="btn btn-danger btn-lg">Danger</button></td>
								<td><button class="btn btn-danger btn-sm">Danger</button></td>
								<td><button class="btn btn-danger btn-flat">Danger</button></td>
								<td><button class="btn btn-danger disabled">Danger</button></td>
							</tr>
							<tr>
								<td><button class="btn btn-warning">Warning</button></td>
								<td><button class="btn btn-warning btn-lg">Warning</button></td>
								<td><button class="btn btn-warning btn-sm">Warning</button></td>
								<td><button class="btn btn-warning btn-flat">Warning</button></td>
								<td><button class="btn btn-warning disabled">Warning</button></td>
							</tr>
						</table>
					</div>
					<!-- /.box -->
				</div>
			</div>
			<!-- /.col -->
		</div>
		<!-- ./row -->
		<div class="row">
			<div class="col-md-6">
				<!-- Block buttons -->
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Block Buttons</h3>
					</div>
					<div class="box-body">
						<button class="btn btn-default btn-block">.btn-block</button>
						<button class="btn btn-default btn-block btn-flat">.btn-block
							.btn-flat</button>
						<button class="btn btn-default btn-block btn-sm">.btn-block
							.btn-sm</button>
					</div>
				</div>
				<!-- /.box -->

				<!-- Horizontal grouping -->
				<div class='box'>
					<div class='box-header'>
						<h3 class='box-title'>Horizontal Button Group</h3>
					</div>
					<div class='box-body table-responsive pad'>
						<p>
							Horizontal button groups are easy to create with bootstrap. Just
							add your buttons inside
							<code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
						</p>

						<table class='table table-bordered'>
							<tr>
								<th>Button</th>
								<th>Icons</th>
								<th>Flat</th>
								<th>Dropdown</th>
							</tr>
							<!-- Default -->
							<tr>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default">Left</button>
										<button type="button" class="btn btn-default">Middle</button>
										<button type="button" class="btn btn-default">Right</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-default">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-default">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-default btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-default btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-default">1</button>
										<button type="button" class="btn btn-default">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- ./default -->
							<!-- Info -->
							<tr>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-info">Left</button>
										<button type="button" class="btn btn-info">Middle</button>
										<button type="button" class="btn btn-info">Right</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-info">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-info">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-info">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-info btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-info btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-info btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-info">1</button>
										<button type="button" class="btn btn-info">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-info dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /. info -->
							<!-- /.danger -->
							<tr>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-danger">Left</button>
										<button type="button" class="btn btn-danger">Middle</button>
										<button type="button" class="btn btn-danger">Right</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-danger">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-danger">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-danger">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-danger btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-danger btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-danger btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-danger">1</button>
										<button type="button" class="btn btn-danger">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-danger dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /.danger -->
							<!-- warning -->
							<tr>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-warning">Left</button>
										<button type="button" class="btn btn-warning">Middle</button>
										<button type="button" class="btn btn-warning">Right</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-warning">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-warning">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-warning">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-warning btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-warning btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-warning btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-warning">1</button>
										<button type="button" class="btn btn-warning">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-warning dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /.warning -->
							<!-- success -->
							<tr>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-success">Left</button>
										<button type="button" class="btn btn-success">Middle</button>
										<button type="button" class="btn btn-success">Right</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-success">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-success">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-success">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-success btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-success btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-success btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group">
										<button type="button" class="btn btn-success">1</button>
										<button type="button" class="btn btn-success">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-success dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /.success -->
						</table>
					</div>
				</div>
				<!-- /.box -->

				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Button Addon</h3>
					</div>
					<div class="box-body">
						<p>With dropdown</p>
						<div class="input-group margin">
							<div class="input-group-btn">
								<button type="button" class="btn btn-default dropdown-toggle"
									data-toggle="dropdown">
									Action <span class="fa fa-caret-down"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<!-- /btn-group -->
							<input type="text" class="form-control">
						</div>
						<!-- /input-group -->
						<p>Normal</p>
						<div class="input-group margin">
							<div class="input-group-btn">
								<button type="button" class="btn btn-danger">Action</button>
							</div>
							<!-- /btn-group -->
							<input type="text" class="form-control">
						</div>
						<!-- /input-group -->
						<p>Flat</p>
						<div class="input-group margin">
							<input type="text" class="form-control"> <span
								class="input-group-btn">
								<button class="btn btn-info btn-flat" type="button">Go!</button>
							</span>
						</div>
						<!-- /input-group -->
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
				<!-- split buttons box -->
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Split buttons</h3>
					</div>
					<div class="box-body">
						<!-- Split button -->
						<p>Normal slplit buttons:</p>
						<div class="margin">
							<div class="btn-group">
								<button type="button" class="btn btn-default">Action</button>
								<button type="button" class="btn btn-default dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-info">Action</button>
								<button type="button" class="btn btn-info dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-danger">Action</button>
								<button type="button" class="btn btn-danger dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-success">Action</button>
								<button type="button" class="btn btn-success dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-warning">Action</button>
								<button type="button" class="btn btn-warning dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
						</div>
						<!-- flat split buttons -->
						<p>Flat split buttons:</p>
						<div class="margin">
							<div class="btn-group">
								<button type="button" class="btn btn-default btn-flat">Action</button>
								<button type="button"
									class="btn btn-default btn-flat dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-info btn-flat">Action</button>
								<button type="button"
									class="btn btn-info btn-flat dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-danger btn-flat">Action</button>
								<button type="button"
									class="btn btn-danger btn-flat dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-success btn-flat">Action</button>
								<button type="button"
									class="btn btn-success btn-flat dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-warning btn-flat">Action</button>
								<button type="button"
									class="btn btn-warning btn-flat dropdown-toggle"
									data-toggle="dropdown">
									<span class="caret"></span> <span class="sr-only">Toggle
										Dropdown</span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Action</a></li>
									<li><a href="#">Another action</a></li>
									<li><a href="#">Something else here</a></li>
									<li class="divider"></li>
									<li><a href="#">Separated link</a></li>
								</ul>
							</div>
						</div>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- end split buttons box -->

				<!-- social buttons -->
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">
							Social Buttons (By <a
								href="https://github.com/lipis/bootstrap-social">Lipis</a>)
						</h3>
					</div>
					<div class="box-body">
						<a class="btn btn-block btn-social btn-bitbucket"> <i
							class="fa fa-bitbucket"></i> Sign in with Bitbucket
						</a> <a class="btn btn-block btn-social btn-dropbox"> <i
							class="fa fa-dropbox"></i> Sign in with Dropbox
						</a> <a class="btn btn-block btn-social btn-facebook"> <i
							class="fa fa-facebook"></i> Sign in with Facebook
						</a> <a class="btn btn-block btn-social btn-flickr"> <i
							class="fa fa-flickr"></i> Sign in with Flickr
						</a> <a class="btn btn-block btn-social btn-foursquare"> <i
							class="fa fa-foursquare"></i> Sign in with Foursquare
						</a> <a class="btn btn-block btn-social btn-github"> <i
							class="fa fa-github"></i> Sign in with GitHub
						</a> <a class="btn btn-block btn-social btn-google-plus"> <i
							class="fa fa-google-plus"></i> Sign in with Google
						</a> <a class="btn btn-block btn-social btn-instagram"> <i
							class="fa fa-instagram"></i> Sign in with Instagram
						</a> <a class="btn btn-block btn-social btn-linkedin"> <i
							class="fa fa-linkedin"></i> Sign in with LinkedIn
						</a> <a class="btn btn-block btn-social btn-tumblr"> <i
							class="fa fa-tumblr"></i> Sign in with Tumblr
						</a> <a class="btn btn-block btn-social btn-twitter"> <i
							class="fa fa-twitter"></i> Sign in with Twitter
						</a> <a class="btn btn-block btn-social btn-vk"> <i
							class="fa fa-vk"></i> Sign in with VK
						</a> <br />
						<div class="text-center">
							<a class="btn btn-social-icon btn-bitbucket"><i
								class="fa fa-bitbucket"></i></a> <a
								class="btn btn-social-icon btn-dropbox"><i
								class="fa fa-dropbox"></i></a> <a
								class="btn btn-social-icon btn-facebook"><i
								class="fa fa-facebook"></i></a> <a
								class="btn btn-social-icon btn-flickr"><i
								class="fa fa-flickr"></i></a> <a
								class="btn btn-social-icon btn-foursquare"><i
								class="fa fa-foursquare"></i></a> <a
								class="btn btn-social-icon btn-github"><i
								class="fa fa-github"></i></a> <a
								class="btn btn-social-icon btn-google-plus"><i
								class="fa fa-google-plus"></i></a> <a
								class="btn btn-social-icon btn-instagram"><i
								class="fa fa-instagram"></i></a> <a
								class="btn btn-social-icon btn-linkedin"><i
								class="fa fa-linkedin"></i></a> <a
								class="btn btn-social-icon btn-tumblr"><i
								class="fa fa-tumblr"></i></a> <a
								class="btn btn-social-icon btn-twitter"><i
								class="fa fa-twitter"></i></a> <a class="btn btn-social-icon btn-vk"><i
								class="fa fa-vk"></i></a>
						</div>
					</div>
				</div>
				<!-- /.box -->

			</div>
			<!-- /.col -->
			<div class="col-md-6">
				<!-- Application buttons -->
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Application Buttons</h3>
					</div>
					<div class="box-body">
						<p>
							Add the classes
							<code>.btn.btn-app</code>
							to an
							<code>&lt;a></code>
							tag to achieve the following:
						</p>
						<a class="btn btn-app"> <i class="fa fa-edit"></i> Edit
						</a> <a class="btn btn-app"> <i class="fa fa-play"></i> Play
						</a> <a class="btn btn-app"> <i class="fa fa-repeat"></i> Repeat
						</a> <a class="btn btn-app"> <i class="fa fa-pause"></i> Pause
						</a> <a class="btn btn-app"> <i class="fa fa-save"></i> Save
						</a> <a class="btn btn-app"> <span class="badge bg-yellow">3</span>
							<i class="fa fa-bullhorn"></i> Notifications
						</a> <a class="btn btn-app"> <span class="badge bg-green">300</span>
							<i class="fa fa-barcode"></i> Products
						</a> <a class="btn btn-app"> <span class="badge bg-purple">891</span>
							<i class="fa fa-users"></i> Users
						</a> <a class="btn btn-app"> <span class="badge bg-teal">67</span>
							<i class="fa fa-inbox"></i> Orders
						</a> <a class="btn btn-app"> <span class="badge bg-aqua">12</span>
							<i class="fa fa-envelope"></i> Inbox
						</a> <a class="btn btn-app"> <span class="badge bg-red">531</span>
							<i class="fa fa-heart-o"></i> Likes
						</a>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
				<!-- Various colors -->
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Different colors</h3>
					</div>
					<div class="box-body">
						<p>
							Mix and match with various background colors. Use base class
							<code>.btn</code>
							and add any available
							<code>.bg-*</code>
							class
						</p>
						<!-- You may notice a .margin class added
                                    here but that's only to make the content
                                    display correctly without having to use a table-->
						<p>
							<button class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button>
							<button class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button>
							<button class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
							<button class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
							<button class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button>
						</p>

						<p>
							<button class="btn bg-maroon margin">.btn.bg-maroon</button>
							<button class="btn bg-purple margin">.btn.bg-purple</button>
							<button class="btn bg-navy margin">.btn.bg-navy</button>
							<button class="btn bg-orange margin">.btn.bg-orange</button>
							<button class="btn bg-olive margin">.btn.bg-olive</button>
						</p>
					</div>
				</div>
				<!-- /.box -->

				<!-- Vertical grouping -->
				<div class='box'>
					<div class='box-header'>
						<h3 class='box-title'>Vertical Button Group</h3>
					</div>
					<div class='box-body table-responsive pad'>

						<p>
							Vertical button groups are easy to create with bootstrap. Just
							add your buttons inside
							<code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code>
						</p>

						<table class='table table-bordered'>
							<tr>
								<th>Button</th>
								<th>Icons</th>
								<th>Flat</th>
								<th>Dropdown</th>
							</tr>
							<!-- Default -->
							<tr>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-default">Top</button>
										<button type="button" class="btn btn-default">Middle</button>
										<button type="button" class="btn btn-default">Bottom</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-default">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-default">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-default">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-default btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-default btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-default btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-default">1</button>
										<button type="button" class="btn btn-default">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-default dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- ./default -->
							<!-- Info -->
							<tr>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-info">Top</button>
										<button type="button" class="btn btn-info">Middle</button>
										<button type="button" class="btn btn-info">Bottom</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-info">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-info">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-info">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-info btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-info btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-info btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-info">1</button>
										<button type="button" class="btn btn-info">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-info dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /. info -->
							<!-- /.danger -->
							<tr>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-danger">Top</button>
										<button type="button" class="btn btn-danger">Middle</button>
										<button type="button" class="btn btn-danger">Bottom</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-danger">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-danger">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-danger">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-danger btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-danger btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-danger btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-danger">1</button>
										<button type="button" class="btn btn-danger">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-danger dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /.danger -->
							<!-- warning -->
							<tr>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-warning">Top</button>
										<button type="button" class="btn btn-warning">Middle</button>
										<button type="button" class="btn btn-warning">Bottom</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-warning">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-warning">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-warning">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-warning btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-warning btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-warning btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-warning">1</button>
										<button type="button" class="btn btn-warning">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-warning dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /.warning -->
							<!-- success -->
							<tr>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-success">Top</button>
										<button type="button" class="btn btn-success">Middle</button>
										<button type="button" class="btn btn-success">Bottom</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-success">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-success">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-success">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-success btn-flat">
											<i class='fa fa-align-left'></i>
										</button>
										<button type="button" class="btn btn-success btn-flat">
											<i class='fa fa-align-center'></i>
										</button>
										<button type="button" class="btn btn-success btn-flat">
											<i class='fa fa-align-right'></i>
										</button>
									</div>
								</td>
								<td>
									<div class="btn-group-vertical">
										<button type="button" class="btn btn-success">1</button>
										<button type="button" class="btn btn-success">2</button>

										<div class="btn-group">
											<button type="button" class="btn btn-success dropdown-toggle"
												data-toggle="dropdown">
												<span class="caret"></span>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Dropdown link</a></li>
												<li><a href="#">Dropdown link</a></li>
											</ul>
										</div>
									</div>
								</td>
							</tr>
							<!-- /.success -->
						</table>
					</div>
				</div>
				<!-- /.box -->

			</div>
			<!-- /.col -->
		</div>
		<!-- /. row -->
	</section>
	<!-- /.content -->



	<!-- jQuery 2.0.2 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="${pageContext.request.contextPath}/resources/js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="${pageContext.request.contextPath}/resources/js/AdminLTE/demo.js" type="text/javascript"></script>
    </body>
</html>